<template>
	<view class="salesbox">
		<view class="timebox">
			<view class="left_t" @click="dateModeAction">{{ dateValue || '请选择时间' }}</view>
			<view class="right_t" @click="getsaleStat">
				<text class="search-icon iconfont icon-search" style="font-size: 60rpx"></text>
			</view>
		</view>
		<view class="cardboxone" v-for="(t, index) in oneData" :key="index">
			<view class="titletext">{{ t.title }}</view>
			<view class="numbox">
				<view class="n_left">
					<view class="num">{{ t.num }}</view>
					<view :class="{ tongbi: true, tongj: t.tips < 1 }">{{ t.tips > 0 ? '+' + t.tips : t.tips }}%</view>
				</view>
				<image class="n_right" src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/images/1733746102534sbcdefg.png" />
			</view>
		</view>
		<view class="xsqdcardbox">
			<view class="xsqdtitle">渠道销售来源</view>
			<view class="xsqdtopbox">
				<view class="xsleft">家</view>
				<view class="xsright">机构家长</view>
			</view>
			<view class="xsqdbombox">
				<view class="xsbomleft">成交费用（元）</view>
				<view class="xsbomleft">{{ dataInfo.dealPrice }}</view>
			</view>
			<view class="xsqdbombox">
				<view class="xsbomleft">销售量</view>
				<view class="xsbomleft">{{ dataInfo.saleAmount }}</view>
			</view>

			<view class="xsqdtopbox">
				<view class="xsleft" style="color: #fbd342">介</view>
				<view class="xsright">转介绍</view>
			</view>
			<view class="xsqdbombox">
				<view class="xsbomleft">费用（元）</view>
				<view class="xsbomleft">{{ dataInfo.transferPrice }}</view>
			</view>
			<view class="xsqdbombox">
				<view class="xsbomleft">销售量</view>
				<view class="xsbomleft">{{ dataInfo.introductionAmount }}</view>
			</view>
		</view>
		<date-range
			:mode="viewMode"
			:showMutibleDate="showMutibleDate"
			:startDate="startDate"
			:endDate="endDate"
			@onSelected="dateSelected"
		></date-range>
	</view>
</template>

<script>
import dateRange from '../components/zxp-datepickerRange/zxp-datepickerRange.vue'
import { saleStat } from '@/api/yanxue/user.js'
export default {
	components: {
		dateRange
	},
	data() {
		return {
			startDate: '2024-12-01',
			endDate: '',
			showMutibleDate: false,
			viewMode: 'date',
			dateValue: '',
			timeValue: '',

			oneData: [
				{
					title: '招生人数',
					num: 0,
					tips: 0
				},
				{
					title: '成交金额（元）',
					num: 0,
					tips: 0
				},
				{
					title: '利润金额（元）',
					num: 0,
					tips: 0
				}
			],
			dataInfo: {}
		}
	},
	created() {
		let currentDate = new Date()
		let year = currentDate.getFullYear()
		let month = currentDate.getMonth() + 1
		let isLastMonth = month === 12
		let nextMonthFirstDay = new Date(isLastMonth ? year + 1 : year, isLastMonth ? 1 : month - 1, 1)
		let lastMonthDay = new Date(nextMonthFirstDay.getTime() - 24 * 60 * 60 * 1000).getDate()
		this.dateValue = `${year}-${month}-01` + '-' + `${year}-${month}-${lastMonthDay}`
		this.startDate = `${year}-${month}-01`
		this.endDate = `${year}-${month}-${lastMonthDay}`
		this.getsaleStat()
	},
	methods: {
		getsaleStat() {
			if (this.dateValue == '')
				return uni.showToast({
					title: '请先选择时间',
					icon: 'none'
				})
			let obj = {
				endTime: this.endDate,
				startTime: this.startDate
			}
			saleStat(obj).then(res => {
				let data = res.result || {}
				this.oneData[0].num = data.recruitStudents
				this.oneData[0].tips = data.increaseValue1
				this.oneData[1].num = data.salePrice
				this.oneData[1].tips = data.increaseValue2
				this.oneData[2].num = data.profitPrice
				this.oneData[2].tips = data.increaseValue3
				this.dataInfo = data
			})
		},
		dateSelected(e) {
			if (e) {
				let start = e.start
				let end = e.end
				if (this.viewMode == 'date') {
					this.dateValue = start + '-' + end
				} else {
					this.timeValue = start + '-' + end
				}
				this.startDate = start
				this.endDate = end
			}
			/*这里必须将值置为false，否则无法唤起下一次的弹框显示*/
			this.showMutibleDate = false
		},
		dateModeAction() {
			this.viewMode = 'date'
			this.showMutibleDate = true
		},
		timeModeAction() {
			this.viewMode = 'time'
			if (this.startDate.length > 5) {
				//这里仅做测试数据，实际使用时，根据业务逻辑传值即可。
				this.startDate = '10:00'
				this.endDate = '10:30'
			}

			this.showMutibleDate = true
		}
	}
}
</script>

<style scoped lang="scss">
.salesbox {
	width: 100%;
	// height: 100vh;
	// overflow: scroll;
}
.timebox {
	margin: 64rpx 32rpx 40rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.left_t {
		width: 542rpx;
		height: 112rpx;
		background: #ffffff;
		border-radius: 48rpx;
		text-align: center;
		line-height: 110rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #718096;
	}

	.right_t {
		width: 112rpx;
		height: 112rpx;
		background: #ffffff;
		border-radius: 48rpx;
		text-align: center;
		line-height: 112rpx;
	}
}

.cardboxone {
	width: 686rpx;
	height: 266rpx;
	background: #ffffff;
	border-radius: 64rpx;
	margin: 0 auto 32rpx;
	padding: 33rpx;

	.titletext {
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #718096;
		line-height: 22rpx;
	}

	.numbox {
		display: flex;
		margin-top: 56rpx;
		justify-content: space-between;

		.n_left {
			flex: 1;

			.num {
				font-family: HarmonyOS Sans SC;
				font-weight: bold;
				font-size: 64rpx;
				color: #111827;
				line-height: 80rpx;
			}

			.tongbi {
				font-family: HarmonyOS Sans SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #f95513;
				line-height: 38rpx;
			}

			.tongj {
				color: #73ff15;
			}
		}

		.n_right {
			width: 318rpx;
			height: 98rpx;
		}
	}
}

.xsqdcardbox {
	width: 702rpx;
	background: #ffffff;
	border-radius: 64rpx;
	padding: 46rpx 34rpx;
	margin: 0 auto;

	.xsqdtitle {
		font-family: HarmonyOS Sans SC;
		font-weight: 500;
		font-size: 41rpx;
		color: #111827;
	}

	.xsqdtopbox {
		display: flex;
		align-items: center;
		margin-top: 100rpx;
		margin-bottom: 50rpx;

		.xsleft {
			width: 82rpx;
			height: 82rpx;
			background: #f9fafb;
			border-radius: 41rpx;
			color: #f95513;
			line-height: 82rpx;
			text-align: center;
			margin-right: 34rpx;
		}

		.xsright {
			font-family: HarmonyOS Sans SC;
			font-weight: 500;
			font-size: 33rpx;
			color: #111827;
			line-height: 49rpx;
		}
	}

	.xsqdbombox {
		display: flex;
		justify-content: space-between;
		margin-bottom: 56rpx;

		.xsbomleft {
			font-family: HarmonyOS Sans SC;
			font-weight: 400;
			font-size: 29rpx;
			color: #718096;
			line-height: 45rpx;
		}
	}
}
</style>
